<template>
	<!-- <view><navigator url="../woyaocanyu/woyaocanyu">{{date}}</navigator></view> -->
	<view>
		<view class="create">
			<form @submit="formSubmit">
				<view class="information">
					<view class="username">
						<text class="name"><text>姓名</text></text>
						<input type="text" class="input_name" name="name" placeholder="请输入姓名" v-model="name" />
					</view>
					<view class="input_tel">
						<text class="tel"><text>联系电话</text></text>
						<input type="number" class="input_name" name="tel" placeholder="输入联系人电话"  v-model="phoneVal"/>
					</view>
					<view class="input_add">
						<text class="add"><text>所在地址</text></text>
						<input type="text" class="input_name" name="add" placeholder="选择省、市、区、(县)" v-model="minuteAddress"/>
					</view>
				</view>
				<view class="brand_post">
					<view class="input_brand">
						<text class="brand"><text>品牌</text></text>
						<input type="text" class="input_name" name="brand" placeholder="输入汽车品牌" v-model="brandVal"/>
					</view>
					<view class="input_post">
						<text class="post"><text>岗位</text></text>
						<input type="text" class="input_name" name="post" placeholder="请输入岗位" v-model="postVal"/>
					</view>
				</view>
				<view class="prompt">
					<view class="remarks">备注</view>
					<view class="point">选择意向品牌创建类似活动，届时会有工作人员联系您。</view>
					<view class="submit_btn">
						<button class="submit" form-type="submit">确认</button>
					</view>
					<!-- 掌邦技术支持 -->
					<view class="support">
						<image class="zanboon" src="../../static/zanboon.png"></image>
					</view>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				phoneVal:'',
				minuteAddress:'',
				brandVal:'',
				postVal:'',
				forbidden:false,
			}
		},
		onLoad() {

		},
		methods: {
			//验证
			verification(){
			    let flag=true
			    let regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im,
				regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
			    if(this.name==""){
				    uni.showToast({
						title:"姓名不能为空",
						duration:2000,
						mask:true,
						icon:"none"
				   })
				   return flag=false
			    }
			    if(regEn.test(this.name) || regCn.test(this.name)){
				    uni.showToast({
						title:"姓名不能包含特殊字符",
						duration:2000,
						mask:true,
						icon:"none"
				   })
				   return flag=false
				}
			    if(!(/^1[34578]\d{9}$/.test(this.phoneVal))){ 
					    this.forbidden=false
						uni.showToast({
							title: '手机号码有误，请重填',
							duration: 2000,
							icon :"none",
							position:"top",
							mask:true
						});
				    return flag=false
			    } 
			    if(this.minuteAddress==""){
					uni.showToast({
						title:"地址不能为空",
						duration:2000,
						mask:true,
						icon:"none"
					 })
					return flag=false
			    }
			    if(regEn.test(this.minuteAddress) || regCn.test(this.minuteAddress)){
				    uni.showToast({
						title:"地址不能包含特殊字符",
						duration:2000,
						mask:true,
						icon:"none"
				    })
				    return flag=false
			    }
				if(this.brandVal==""){
					uni.showToast({
						title:"汽车品牌不能为空",
						duration:2000,
						mask:true,
						icon:"none"
					 })
					return flag=false
			    }
				if(regEn.test(this.brandVal) || regCn.test(this.brandVal)){
				    uni.showToast({
						title:"汽车品牌不能包含特殊字符",
						duration:2000,
						mask:true,
						icon:"none"
				    })
				    return flag=false
				}
				if(this.postVal==""){
					uni.showToast({
						title:"岗位不能为空",
						duration:2000,
						mask:true,
						icon:"none"
					 })
					return flag=false
				}
				if(regEn.test(this.postVal) || regCn.test(this.postVal)){
				    uni.showToast({
						title:"岗位不能包含特殊字符",
						duration:2000,
						mask:true,
						icon:"none"
				    })
				    return flag=false
				}
			},
			// 保存
			formSubmit: function(e) {
				let that = this;
				// console.log(that.verification(),'211212');
				if(!that.verification()){
					return false;
				}
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
                // var formdata = e.detail.value
                // uni.showModal({
                //     content: '表单数据内容：' + JSON.stringify(formdata),
                //     showCancel: false
                // });
            },
		}
	}
</script>

<style>
  /* body{
		height: 100%;
		background: #F3F2F7;
	}
	.body{
		height: 100%;
		background: #F3F2F7;
	} */
	page{
		background: #F3F2F7;
	}
		.create{
			display: flex;
			justify-content: center;
		}
	.information{
		margin-bottom: 30upx;
		background-color: #FFFFFF;
	}
			.username{
				height: 110upx;
				border-bottom:1upx solid #E6E6E6;
				display: flex;
				align-items: center;
				margin-left: 30upx;
				margin-right: 30upx;
			}
				.name{
					display: flex;
					align-items: center;
					color: #333333;
					font-size: 30upx;
				    height:110upx;
					width: 160upx;
					font-weight: bold;
				}
				.input_name{
					width: 490upx;
					/* border: 1upx solid #007AFF; */
				}
			.input_tel{
				height: 110upx;
				border-bottom:1upx solid #E6E6E6;
				display: flex;
				align-items: center;
				margin-left: 30upx;
				margin-right: 30upx;
			}	
				.tel{
					display: flex;
					align-items: center;
					color: #333333;
					font-size: 30upx;
					font-weight: bold;
					height:110upx;
					width: 160upx;
					/* border:1upx solid #000000 */
				}
			.input_add{
				height: 110upx;
				display: flex;
				align-items: center;
				margin-left: 30upx;
				margin-right: 30upx;
			}
				.add{
					display: flex;
					align-items: center;
					color: #333333;
					font-size: 30upx;
					height:110upx;
					width: 160upx;
					font-weight: bold;
				}
	.brand_post{
		width: 750upx;
		background-color: #FFFFFF;
	}
			.input_brand{
				height: 110upx;
				border-bottom:1upx solid #E6E6E6;
				display: flex;
				align-items: center;
				margin-left: 30upx;
				margin-right: 30upx;
			}
				.brand{
					display: flex;
					align-items: center;
					color: #333333;
					font-size: 30upx;
					height:110upx;
					width: 160upx;
					font-weight: bold;
				}
			.input_post{
				height: 110upx;
				display: flex;
				align-items: center;
				margin-left: 30upx;
				margin-right: 30upx;
			}
				.post{
					display: flex;
					align-items: center;
					color: #333333;
					font-size: 30upx;
					height:110upx;
					width: 160upx;
					font-weight: bold;
				}
			.prompt{
				/* display: flex;
				justify-content: center;
				align-items: center; */
				color: #AAAAAA;
				font-size: 28upx;
				margin-top: 30upx;
			}
				.remarks{
					margin-left:30upx;
				}
				.point{
					margin-left:30upx;
				}
				.submit_btn{
					margin-top: 162upx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
					.submit{
						width:620upx ;
						color: #FFFFFF;
						background-color: #D53D34;
						font-size: 32upx;
					}
					.submit:after{
						border: none;
					}
				.support{
					position: absolute;
					/* display: flex;
					justify-content: center; */
					/* margin-top:29%; */
					left: 267upx;
					margin-bottom: 20upx;
					bottom: 0;
					
				}
					.zanboon{
						height: 28upx;
						width: 216upx;
					}
</style>
